<template>
	<div
		class="data h-full w-full flex justify-evenly items-center flex-wrap px-4"
	>
		<CommonTime class="w-full h-32" />
		<div class="content">
			<a-tabs default-active-key="1">
				<a-tab-pane key="1" title="Tab 表">
					<div class="pannel">
						<a-table
							:columns="columns"
							:data="getLatestStocks"
							:pagination="false"
							column-resizable
							:summary="summary"
						>
							<template #name="{ record }">
								<div class="flex justify-between items-center">
									<a-button
										type="outline"
										@click="handleRowClick(record)"
										:disabled="!record.show"
									>
										<span class="w-12">{{
											getPaddingName(record.name)
										}}</span>
									</a-button>
									<a-switch
										v-model="record.show"
										@change="
											(value) =>
												handleCellSwitch(record, value)
										"
									>
										<template #checked> ON </template>
										<template #unchecked> OFF </template>
									</a-switch>
								</div>
							</template>
							<template #allShare="{ record }">
								{{
									Number.isInteger(record.allShare)
										? record.allShare
										: record.allShare.toFixed(2)
								}}
							</template>
							<template #profit="{ record }">
								<div
									:style="
										getProfitColorStyle(record, 'profit')
									"
								>
									{{ `${record.profit.toFixed(3)}%` }}
								</div>
							</template>
							<template #cost="{ record }">
								{{ record.cost.toFixed(3) }}
							</template>
							<template #price="{ record }">
								{{ record.price.toFixed(3) }}
							</template>
							<template #summary="{ record }">
								<div
									:style="getAvgColorStyle(record, 'summary')"
								>
									{{ record.summary.toFixed(2) }}
								</div>
							</template>
							<template
								#summary-cell="{ column, record, rowIndex }"
							>
								<!-- <div :style="getColorStyle(column, record)"> -->
								{{ record[column.dataIndex] }}
								<!-- </div> -->
							</template>
						</a-table>
					</div>
				</a-tab-pane>
				<a-tab-pane key="2" title="Tab 图">
					<div class="pannel">
						<v-chart class="vchart" :option="option" ref="vchart" />
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>

		<CommonHistory />
	</div>
</template>

<script setup>
import { ref, reactive, nextTick, watch, computed } from "vue";
import { useElementSize } from "@vueuse/core";
import { storeToRefs } from "pinia";

import { useAppStore } from "@/stores";
import CommonTime from "@/components/Time.vue";
import CommonHistory from "@/components/History.vue";

const appStore = useAppStore();
const {
	getLatestStocks,
	getChartLatestStocks,
	getChartLatestStocksByIndustry,
	colors,
} = storeToRefs(appStore);

const columns = [
	{
		title: "代码",
		dataIndex: "code",
		align: "center",
		width: 120,
	},
	{
		title: "名称",
		dataIndex: "name",
		align: "center",
		width: 180,
		slotName: "name",
	},
	{
		title: "行业",
		dataIndex: "industry",
		align: "center",
		width: 120,
	},
	// {
	// 	title: "日期",
	// 	dataIndex: "time",
	// 	align: "center",
	// 	width: 140,
	// },
	{
		title: "持仓",
		dataIndex: "allShare",
		align: "center",
		width: 140,
		slotName: "allShare",
	},
	{
		title: "成本",
		dataIndex: "cost",
		slotName: "cost",
		align: "center",
		width: 140,
	},
	{
		title: "现价",
		dataIndex: "price",
		slotName: "price",
		align: "center",
		width: 140,
	},
	{
		title: "盈利",
		dataIndex: "profit",
		slotName: "profit",
		align: "center",
		width: 140,
		sortable: {
			sortDirections: ["ascend", "descend"],
		},
	},
	{
		title: "市值",
		dataIndex: "summary",
		slotName: "summary",
		align: "center",
		width: 140,
		sortable: {
			sortDirections: ["ascend", "descend"],
		},
	},
];

const summary = ({ columns, data }) => {
	let countData = {
		summary: 0,
		price: 0,
	};
	data.filter((s) => s.show).forEach((record) => {
		countData.summary += record.summary;
		countData.price += record.price;
	});

	return [
		{
			name: "AVG",
			summary: (countData.summary / data.length).toFixed(2),
			// price: (countData.price / data.length).toFixed(2),
		},
		{
			name: "SUM",
			summary: countData.summary.toFixed(2),
			// price: countData.price.toFixed(2),
		},
	];
};

const AVGS = computed(() => {
	return {
		// price: getLatestStocks.value.reduce((prev, cur) => prev + cur.price, 0),
		summary:
			getChartLatestStocks.value.reduce(
				(prev, cur) => prev + cur.summary,
				0
			) / getChartLatestStocks.value.length,
	};
});

const getProfitColorStyle = (record, key) => {
	return { color: record[key] > 0 ? "red" : "green" };
};

const getAvgColorStyle = (record, key) => {
	return { color: record[key] > AVGS.value[key] ? "red" : "green" };
};

const getPaddingName = (name) => {
	return name;
};

const vchart = ref(null);
const option = ref({});
const { width: vchartWidth } = useElementSize(vchart);

const setOption = () => {
	option.value = {
		color: colors.value,
		tooltip: {
			trigger: "item",
			formatter: (params) => {
				const { name, value, percent } = params;

				return `${name}:\n${value.toFixed(2)}元\n${percent}%`;
			},
		},
		legend: {},
		series: [
			{
				type: "pie",
				radius: [0, "25%"],
				data: getChartLatestStocksByIndustry.value.map((stock) => ({
					name: stock.name,
					value: stock.value,
				})),
				label: {
					formatter: (params) => {
						const { name, value, percent } = params;

						// return `${name}\n${value.toFixed(2)}元\n${percent}%`;
						return `${name}\n${percent}%`;
					},
				},
				roseType: "area",
			},
			{
				type: "pie",
				radius: ["45%", "60%"],
				data: getChartLatestStocks.value.map((stock) => ({
					name: stock.name,
					value: stock.summary,
				})),
				label: {
					formatter: (params) => {
						const { name, value, percent } = params;

						// return `${name}\n${value.toFixed(2)}元\n${percent}%`;
						return `${name}\n${percent}%`;
					},
				},
			},
		],
	};
	vchart.value.resize();
	vchart.value.setOption(option.value);
};

nextTick(() => {
	setOption();
});

watch(getLatestStocks, (val, olVal) => {
	setOption();
});

watch(vchartWidth, (val, olVal) => {
	vchart.value.resize();
});

const handleRowClick = (record) => {
	appStore.updateState({ historyVisible: true, historyRecord: record });
};

const handleCellSwitch = (record, value) => {
	appStore.updateStock({ id: record.id, show: value });
};
</script>

<script>
export default {
	name: "Data",
};
</script>

<style scoped lang="less">
.data {
	.content {
		height: calc(100% - 8rem);
		width: 100%;

		.pannel {
			height: calc(100vh - 12rem);
			width: 100%;

			.vchart {
				height: 100%;
				width: 100%;
			}
		}
	}
}
</style>

<route>
	{
		meta: {
			layout: 'default',
		}
	}
</route>
